/*
 * @ddescription: 企业后台商品订单列表/自营、淘客订单列表
 * @Author: along
 * @Date: 2020-10-26
 * @Last Modified by: along
 * @Last Modified time: 2020-10-30
 */
<template>
    <div class="zdOrderList">
        <!-- 淘客 -->
        <order-tbk
            ref="orderTbk"
        />
    </div>
</template>

<script>
import orderTbk from '@/components/manage/market/order-tbk.vue';

export default {
    components: {
        orderTbk
    },
    data () {
        return {
        };
    },
    watch: {
    },
    filters: {
    },
    mounted () {
        if(process.client) {
            this.$store.commit('theme/SET_BREAD', [{title: '订单管理'},{title: '淘客订单列表'}]);
        }
    },
    methods: {
    }
};
</script>

<style lang="less" scoped>
.zdOrderList {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .header {
        width: 100%;
        height: 84px;
        background: #ffffff;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 20px;
        color: #333333;
        font-size: 20px;
        .header-list {
            width: 242px;
            height: 36px;
            background: #EAEAF2;
            border-radius: 18px;
            margin-left: 10px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 4px;
            justify-content: space-between;
            .header-title {
                color: #666;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                width: 113px;
                height: 28px;
                text-align: center;
                line-height: 28px;
            }
            .header-active {
                width: 113px;
                height: 28px;
                background: #ffffff;
                border-radius: 18px;
                text-align: center;
                line-height: 28px;
                color: #20A0FF;
                font-weight: 500;
                font-size: 14px;
            }
        }
    }
    .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        .contentTab {
            position: relative;
            .content-line {
                width: 100%;
                height: 1px;
                background: #E4E7ED;
                left: 0;
                bottom: 24px;
                position: absolute;
            }
        }
        .contentmain {
            box-sizing: border-box;
            padding: 0 24px;
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
        }
        .header-nav {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0px;
            .header-left, .header-right {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .header-new-box {
                display: flex;
                margin-right: 32px;
                align-items: center;
                color: #333333;
                margin-bottom: 24px;
                white-space: nowrap;
                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                    color: #333333;
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
        // 表格
        .tableWrap {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            overflow: hidden;
        }
    }
    //引导
    .dialogGuide {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: rgba(0,0,0,.5);
        z-index: 999;
        &-wrap {
            width: 274px;
            height: 92px;
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 20px 0px rgba(0,0,0,0.16);
            border-radius:4px;
            position: absolute;
            top: 295px;
            left: 245px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            &-text {
                width: 242px;
                height: 40px;
                color: #1D2023;
                font-size: 14px;
                line-height: 20px;
                margin-top: 14px;
                margin-left: 16px;
            }
            &-next {
              color: #20A0FF;
              font-size: 14px;
              font-weight: 500;
              margin-left: 216px;
              margin-top: 8px;
            }
        }
        &-menu{
            width: 190px;
            height: 56px;
            border-radius: 6px;
            background: #fff;
            position: absolute;
            left: 7px;
            top: 421px;
            &-text {
                width: 190px;
                height: 40px;
                margin-top: 8px;
                background:rgba(233,246,255,1);
                color: #20A0FF;
                font-size: 14px;
                line-height: 40px;
                padding-left: 52px;
                cursor: pointer;
            }
        }
        &-wrap-order {
            width: 274px;
            height: 92px;
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 20px 0px rgba(0,0,0,0.16);
            border-radius:4px;
            position: absolute;
            top: 100px;
            right: 156px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            &-text {
                width: 242px;
                height: 40px;
                color: #1D2023;
                font-size: 14px;
                line-height: 20px;
                margin-top: 14px;
                margin-left: 16px;
                letter-spacing: 0;
            }
            &-next {
              color: #20A0FF;
              font-size: 14px;
              font-weight: 500;
              margin-left: 216px;
              margin-top: 8px;
            }
        }
    }
}
</style>

<style lang="less">
.zdOrderList {
    .el-tabs__header {
        padding: 10px 24px;
        .el-tabs__item {
            color: #666;
            box-shadow: none !important;
            &:hover {
                color: #409EFF;
            }
        }
        .is-active {
            color: #409EFF;
        }
        .el-tabs__nav-wrap::after {
            height: 1px;;
        }
    }
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
}
</style>